<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>分页练习</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="layui/layui.js"></script>
  <script>
    onload = ()=>{
      layui.laypage.render({
        elem: 分页, //这里填写div元素的id
        count: 70, //数据总数
        first: '首页',
        last: '尾页',
        jump(obj){
          //console.log(`你切换到第${obj.curr}了页，需要让后台返回第${(obj.curr-1)*10}到第${(obj.curr-1)*10+10}条数据。`);
        }
      });

      let arr = document.querySelectorAll('#选项卡 li');
      for(let i of arr){
        i.onclick = ()=>{
          内容.innerText = '你点击了：'+i.innerText+'可跳转到URL：'+i.getAttribute('url');
        };
      }
      arr[0].onclick = ()=>{
        内容.innerText = '欢迎使用个人网上银行';
      }
    };
  </script>
</head>
<body>

  <div id="分页"></div>

  <div id="选项卡" class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
      <li class="layui-this">首页</li>
      <li url="http://127.0.0.1:6060/adminBank/jsp/chaxunyue.jsp?balance=4651.6">查询余额</li>
      <li url="http://127.0.0.1:6060/adminBank/jsp/zhuanzhang.jsp?cardno=6222000000000000">转账</li>
      <li url="http://127.0.0.1:6060/adminBank/jsp/chaxunjiaoyijilu.jsp?cardno=6222000000000000">查询交易记录</li>
      <li url="http://127.0.0.1:6060/adminBank/jsp/xiugaimima.jsp?cardno=6222000000000000">修改密码</li>
    </ul>
    <div id="内容" class="layui-tab-content">欢迎使用个人网上银行</div>
  </div>

</body>
</html>